<template>
    <hr/>
</template>

<script setup>
    
</script>

<style scoped lang="scss">

hr {
    position: relative;
    overflow: visible;
    margin: 30px auto;
    border: 0 solid transparent;
    border-top: 3px dashed var(--primary-color);
    width: calc(100% - 10px);
    box-sizing: content-box;
    height: 5px; // 方便触发hover
    // background-color: orange;
    &::before {
        display: inline-block;
        position: absolute;
        content: '✄';
        color: var(--primary-color);
        font-size: 30px;
        line-height: 1;
        z-index: 1;
        text-rendering: auto;
        font-weight: 600;
        top: -16px;
        right: 10%;
    }
    &:hover::before {
        // background-color: purple;
        animation: transformH 1.2s ease;
        // transition: transform .3s ease;
        // right: 85%;
        @keyframes transformH {
            100% {
                right: 10%;
            }
            
            50% {
                right: 90%;
            }

            100% {
                right: 10%;
            }
        }
    }
}

</style>